<template>
	<view class="box" :style="{height:(device.windowHeight-device.footerHeight)+'px'}">
		
			<view id="id-invoice-list" class="list">
				<view class="item" v-for="(i, index) in datas" :key="i.id" @click="selectVoice(i)">
					<view class="item_header">
						<view>{{i.invoiceTypeCode == 'GENERAL_VAT'?'普通发票':'专用发票'}}-{{i.invoiceTitleType == 1?'个人':'单位'}}</view>
						<view class="item_title">{{i.invoiceTitle}}</view>
					</view>
					<view class="item_handle">
						<u-icon name="edit-pen" customStyle="padding:20rpx" size="24" @click.stop="toEdit(i)"></u-icon>
						<u-icon name="trash" customStyle="padding:20rpx"  size="24"  @click.stop="del(i)"></u-icon>
					</view>
				</view>
				<u-empty mode="data" v-if="datas.length == 0"></u-empty>
				<x-footer>
					<button style="width:710rpx; border: none; border-radius: 44rpx;" class="x-btn" @click="addInvoice">添加发票抬头</button>
				</x-footer>
			</view>
		
	</view>
</template>

<script>
	import {
		page,
		del
	} from '@/api/invoice.js'
	import EventBusMacro from '@/plugins/EventBus/eventBusMacro.js'
	import {
		mapState
	} from 'vuex'
	import {
		ThemeMixin
	} from '@/mixins/theme/xThemeMixin.js'
	
	export default {
		components:{
		},
		mixins: [ThemeMixin],
		computed: {
			...mapState(['device']),
			itemClasses: function() {
				return this.datas.map((item, index) => {
					if (index === 0) {
						return 'x-list-item-first';
					} else if (index === this.datas.length - 1) {
						return 'x-list-item-last';
					} else {
						return 'x-list-item';
					}
				});
			},
		},
		data() {
			return {
				// current: 0,
				datas: [], //存放数据，一旦有数据就缓存起来，直到退出页面才失效
				// offsetDict: {}, //存放数据偏移量，切换回页面不用从头开始
				// history: [],
				isSelected: false,
			}
		},
		onLoad(options) {
			if (options.isSelected) {
				this.isSelected = JSON.parse(options.isSelected);
			}
			this.loadData()
			this.$events.on(EventBusMacro.EB_EDIT_INVOICE_INFO, this.onEditInvoice)
		},
		beforeDestroy() {
			this.$events.off(EventBusMacro.EB_EDIT_INVOICE_INFO, this.onEditInvoice)
		},

		methods: {
			onEditInvoice() {
				this.loadData()
			},
			
			selectVoice(e) {
				if (!this.isSelected) {
					return false;
				}
				this.$events.emit(EventBusMacro.EB_INVOICE_CHANGE, e);
				uni.navigateBack()
			},
			addInvoice(e) {
				uni.navigateTo({
					url: '/pages/mine/invoice/add',
					complete: c => {
						console.log('c', c)
					}
				})
			},
			loadData() {
				this.$showLoading()
				page().then(res => {
					this.datas = res
					this.$hideLoading()
					// this.$set(this.dataDict, this.current, res);
				}).catch(err => {
					this.$hideLoading()
				})
			},
			toEdit(e) {
				uni.navigateTo({
					url: '/pages/mine/invoice/add?info=' + JSON.stringify(e)
				})
			},
			del(e) {
				uni.showModal({
					title: '提示',
					content: '确定删除这个发票抬头吗？',
					success: res => {
						if (res.confirm) {
							del(e).then(d => {
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								})
								this.loadData()
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #f9f9f9;
		font-size: 30rpx;
		overflow-y: scroll;
	}
	.item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		justify-content: space-between;
		width: 700rpx;
		margin: 28rpx auto;
		background-color: #fff;
		
		.item_header {
			font-size: 23rpx;
			font-weight: 600;
			color: #000000;
			line-height: 33rpx;
			
			.item_title {
				font-weight: 400;
				color: #8E8E8E;
			}
		}
			
		.item_handle {
			display: flex;
			align-items: center;
			color: #2D2D2D;
		}
	}
</style>

